<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>history</title>
</head>
<body>
<div class="router-link">
    <span class="" onClick="routeTo('home')">首页</span>
    <span class="" onClick="routeTo('list')">列表</span>
    <span class="" onClick="routeTo('about')">关于</span>
</div>
<div class="router-view" id="app">

</div>

<script >

document.addEventListener('DOMContentLoaded', function () {
    console.log(location.pathname);
})

window.addEventListener('popstate', function (event) {
    var { state } = event
    console.log('listen', state, event)
    changeView(JSON.stringify(state))
})

function routeTo (targetName) {
    console.log('click', targetName)
    push(targetName)
}

function push (targetName) {
    var state = { page_name: targetName };
    var title = '';
    var url=`${targetName}.html`;
    history.pushState(state, title, url)
    changeView(targetName)
}

function replace(targetName) {
	var state = { page_name: targetName };
    var title = '';
    var url=`${targetName}.html`;
    history.replaceState(state, title, url)
    changeView(targetName)
}

function changeView(val) {
    document.getElementById('app').innerHTML = val
}

// node server.js 
// http://localhost/home.html
// 1. 切换导航标签
// 2. 点击前进和后退



</script>



</body>
</html>